<template>
  <view class="container">
    <!-- 浮动按钮 -->
    <view class="floating-button" @click="onFloatingButtonClick">
      <image src="/static/images/icon/toadd.png" class="icon-img" mode="aspectFit" />
    </view>

    <!-- 查询条件 -->
    <view class="filters">
      <view @click="toggleFilters" class="filter-header">
        <text>查询条件</text>
        <text>{{ showFilters ? '收起' : '展开' }}</text>
      </view>
      <view v-if="showFilters" class="filter-body">
        <input class="filter-input" v-model="query.name" placeholder="请输入关键字" />
        <view class="item-actions-inline">
          <button @click="search()" class="action-button">查询</button>
          <button @click="reset()" class="action-button danger">重置</button>
        </view>
      </view>
    </view>

    <!-- 列表 -->
    <view class="list-container" @scroll="handleScroll">
      <view v-for="item in listData" :key="item.id" class="list-item">
        <view @click="viewDetails(item)">
          <view class="list-detail">产品编号：{{ item.id }}</view>
          <view class="list-detail">产品名称：{{ item.name }}</view>
          <view class="list-detail">产品规格：{{ item.standard }}</view>
          <view class="list-detail">产品条码：{{ item.no }}</view>
          <view class="list-detail">产品分类：{{ item.categoryName }}</view>
          <view class="list-detail">单位编号：{{ item.unitName }}</view>
		  <view class="list-detail">采购价：{{ item.purchasePrice }}</view>
		  <view class="list-detail">销售价：{{ item.salePrice }}</view>
          <view class="list-detail">产品状态：{{ item.status }}</view>
          <view class="list-detail">产品备注：{{ item.remark }}</view>
          <view class="divider"></view>
        </view>
        <view class="item-actions-inline">
          <button @click="editItem(item)" class="action-button">修改</button>
          <button @click="deleteItem(item)" class="action-button danger">删除</button>
        </view>
      </view>
      <view v-if="!hasMoreData" class="no-more-data">没有更多数据了</view>
      <view v-if="loading" class="loading-text">加载中...</view>
    </view>
  </view>
</template>

<script>
import { pageList, deleteProduct } from "@/sheep/api/erp/product.js";
export default {
  data() {
    return {
      showFilters: false,
      query: {
        name: ''
      },
      listData: [],
      pageNum: 1,
      pageSize: 10,
      loading: false,
      hasMoreData: true
    };
  },
  methods: {
    toggleFilters() {
      this.showFilters = !this.showFilters;
    },
    reset() {
      this.query.name = ''; 
      this.refreshData();
    },
    search() {
      this.refreshData();
    },

    refreshData() {
      this.pageNum = 1;
      this.hasMoreData = true;
      this.listData = [];
      this.loadMoreData();
    },

    loadMoreData() {
      if (this.loading || !this.hasMoreData) return;
      this.loading = true;
      const params = {
        pageNo: this.pageNum,
        pageSize: this.pageSize,
        ...this.query
      };
      pageList(params)
        .then((res) => {
          const { list, total } = res.data;
          console.log('加载数据:', { list, total, currentPage: this.pageNum, pageSize: this.pageSize });

          if (this.pageNum * this.pageSize >= total || list.length === 0) {
            this.hasMoreData = false;
          }

          this.listData = [...this.listData, ...list];
        })
        .catch((error) => {
          console.error('加载数据失败:', error);
        })
        .finally(() => {
          this.loading = false;
          uni.stopPullDownRefresh();
        });
    },

    onReachBottom() {
      if (this.loading || !this.hasMoreData) return;
      this.pageNum++;
      this.loadMoreData();
    },

    onPullDownRefresh() {
      console.log('触发了下拉刷新');
      this.refreshData();
    },

    handleScroll(event) {
      const { scrollTop, scrollHeight, clientHeight } = event.detail;
      if (scrollTop + clientHeight >= scrollHeight - 50) {
        this.onReachBottom();
      }
    },

    onFloatingButtonClick() {
      uni.setStorageSync('productId', '');
      uni.navigateTo({
        url: '/pages/erp/product/edit'
      });
    },

    editItem(item) {
      const productId = encodeURIComponent(item.id);
      uni.setStorageSync('productId', productId);
      uni.navigateTo({
        url: "/pages/erp/product/edit"
      });
    },

    viewDetails(item) {
      const productId = encodeURIComponent(item.id);
      uni.setStorageSync('productId', productId);
      uni.navigateTo({
        url: "/pages/erp/product/show"
      });
    },

    async deleteItem(item) {
      try {
        if (item.id) {
          await deleteProduct(item.id);
        }
        this.refreshData();
      } catch (error) {
        console.error('订单删除失败:', error);
      }
    }
  },
  onLoad() {
    uni.setStorageSync('productId', '');
    this.refreshData();
  },
  onShow() {
    this.refreshData();
  }
};
</script>
 